<template>
  <div>
    <!-- 导航组件 -->
    <van-sticky :offset-top="0">
      <van-nav-bar title="医生详情" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <!-- 显示医生详情内容 -->
    <div class="g_color" v-for="item in doctor_del[0]" :key="item.doctor_id">
      <div class="main">
        <div class="cont">
          <div class="doctor">
            <img :src=item.doctor_avatar alt="">
          </div>
          <ul class="infor">
            <li>{{ item.doctor_name }}&nbsp;&nbsp;&nbsp;<van-rate :count="item.doctor_grade" icon="like"
                color="#ffd21e" />
            </li>
            <li>{{ item.doctor_titles }}</li>
            <li>{{ item.hospital_name }}</li>
          </ul>
        </div>
      </div>

      <div class="des">
        <div class="sc">擅长</div>
        <div class="jj">{{ item.doctor_great
        }}
        </div>
        <!-- <div class="hy">所有号源</div> -->
        <van-field v-model="result" is-link readonly name="datePicker" label="时间选择" placeholder="点击选择时间"
          @click="showPicker = true" />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
      </div>
      <button @click="$router.push(`/home/querenguahao/${item.hospital_id}`)">挂号</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import httpApi from '@/http';
import myaxios from '@/http/MyAxios';
import Doctor_del from '@/type/Doctor_del';
import { ref, onMounted, reactive, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showToast } from 'vant';
import { hospital } from '@/type/Location';

const router = useRouter()
const route = useRoute()
const id = route.params.id

// 接收传参
const props = defineProps<{ data: hospital }>()

// 返回上级
const onClickLeft = () => history.back();

// 查询医生详情
const doctor_name = ref('0')
const doctor_id = id
const doctor_del = reactive<Doctor_del[]>([])
onMounted(() => {
  // let params = {doctor_id}
  let url = 'http://localhost:3010/doctorById'
  let params = { doctor_id }
  myaxios.post(url, params).then(res => {
    console.log(res)
    doctor_del.push(res.data.data)
    // console.log(doctor_del)
    // console.log(doctor_del[0])
  })
})


const result = ref('');
    const showPicker = ref(false);
    const onConfirm = ({ selectedValues }:any) => {
      result.value = selectedValues.join('/');
      showPicker.value = false;
    }




</script>

<style scoped>
.van-nav-bar {
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-background: #4f87da;
  --van-nav-bar-arrow-size: 22px;
  --van-nav-bar-title-font-size: 22px;
}


.g_color {
  margin-top: 0px;
  height: 85vh;
  background-color: #eee;
}

.main {
  height: 100px;
  display: flex;
  /* 字体颜色 */
  color: #778899;
  justify-content: space-between;
  padding: 0 10px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.cont {
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}

.cont>.doctor>img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 10px;


}

.cont>.infor {
  /* height: 100px; */
  margin-left: 5px;
  display: flex;
  /* flex: 1; */
  flex-direction: column;
  justify-content: space-around;
}

.cont>.infor>p:first-child {
  color: #000;
  font-weight: 600;
}

/* 星星图标样式 */

.des {
  background-color: #fff;
}

.sc {
  font-size: 18px;
  font-weight: 600;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
  padding: 0 15px;
}

.jj {
  line-height: 25px;
  /* height: 50px; */
  border-bottom: 1px solid #ddd;
  padding: 10px 15px;

}

.hy {
  line-height: 40px;
  border-bottom: 1px solid #ddd;
  padding: 0 15px;
}

.xz {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  /* line-height: 40px; */
}

.sj {
  /* line-height: 38px; */
  display: flex;
}

.sj>p:nth-child(2) {
  margin-left: 30px;
}

.sj>p:nth-child(3) {
  margin-left: 30px;
}

.van-tag {
  margin-top: 20px;
  height: 16px;
  /* --van-tag-line-height: 16px; */
}

button {
  margin: 15px 15px;
  width: 92vw;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 11px;
  color: #fff;
  background: #4f87da;
  border-style: none;
}
</style>